<template>
  <div class="lishibaojing">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="设备名称">
         <el-input  size="small" v-model="formInline.deviceTypeName" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            size="small"
            v-model="formInline.status"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSearch"
            >查询</el-button
          >
          <el-button
            size="small"
            @click="onReset"
            style="background-color: #061f41; color: #dee1e6"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item style="float: right">
                <el-button size="small" @click="tableSetFn" type="primary"
                  >表格设置</el-button
                >
              </el-form-item>
      </el-form>
    </div>
    <div class="bottom">
      <el-table
        :data="tableData"
        :cell-style="selectedCellStyle"
        style="width: 100%"
           :height="tableData.length > 10 ? 550 : tableHeight"
      >
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column
          :prop="item.field"
          :label="item.title"
           :width="item.width"
          v-for="(item, index) in tableHeaderShow"
          :key="index"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </div>
    <pagination
        :total="page.total"
        :page="page.currentPage"
        :limit="page.pageSize"
        @pagination="paginationFn"
      ></pagination>
                <!-- 表格设置 -->
    <el-dialog
      :visible.sync="tableSettingFlag"
      width="50%"
      :before-close="tableSettinghandleClose"
    >
      <span slot="title" style="font-size: 16px">表格设置</span>
      <div style="height: 670px; overflow: auto; margin-bottom: 15px">
        <el-table
          height="650"
          :data="headerTitle"
          :cell-style="selectedCellStyle"
          class="draggable-table"
           row-key="field"
        >
          <el-table-column label="拖动排序" align="center">
            <template slot-scope="{ row }">
              <img
                class="rowSortable"
                src="@/assets/images/排序.png"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            label="列名"
            prop="title"
            align="center"
          ></el-table-column>
          <el-table-column label="是否显示" prop="show" align="center">
            <template slot-scope="{ row }">
              <el-switch
                v-model="row.show"
                active-text="是"
                inactive-text="否"
                :active-value="1"
                :inactive-value="0"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column label="列宽" prop="width">
            <template slot-scope="{ row }">
              <el-input
                v-model="row.width"
                size="small"
                placeholder="请输入列宽"
              ></el-input>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="tableSetSubmit">确 定</el-button>
        <el-button @click="tableSettinghandleClose">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import pagination from "@/components/huazi/pagination.vue";
import axios from "@/utils/request";
import axios3 from "@/utils/request3";
import Sortable from "sortablejs";
import { mapGetters } from "vuex";
import store from "@/store";
export default {
  components: {
    pagination,
  },
  props: {
    title: {
      type: String,
      default: "自定义标题",
    },
  },
  data() {
    return {
      tableHeight:null,
      tableSettingFlag: false,
      formInline: {},
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0,
      },
      statusList:[], //状态下拉框数据
      headerData: [], //表头数据
      headerZiduan: "Gushing_AbnormalPoint",
      headerTitle: [], //表头标题
      tableData: [],
    };
  },
  methods: {
     //表格设置
     tableSetFn() {
      //打开
      this.tableSettingFlag = true;
      this.$nextTick(() => {
        this.rowDrop();
      });
    },
    rowDrop() {
      //行拖拽
      const tbody = document.querySelector(
        ".draggable-table .el-table__body-wrapper tbody"
      );
      new Sortable(tbody, {
        handle: ".rowSortable",
        animation: 150,
        onEnd: ({ newIndex, oldIndex }) => {
          console.log(newIndex, oldIndex);
          this.$nextTick(() => {
            const targetRow = this.headerTitle[oldIndex];
            this.headerTitle.splice(oldIndex, 1);
            this.headerTitle.splice(newIndex, 0, targetRow);
          });
        },
      });
    },
    tableSettinghandleClose() {
      //关闭
      this.tableSettingFlag = false;
    },
    tableSetSubmit() {
      //表格设置提交
      this.headerTitle.forEach((item, index) => {
          item.sort = index;
      });
      axios
        .post("/vxeheaders/setHeaders", {
          headers: this.headerTitle,
        })
        .then((res) => {
          this.getHeaderList()
          // this.getList();
          this.$message.success("设置成功");
          this.tableSettingFlag = false;
        });
    },
    onSearch() {
      //查询
      this.getList("search");
    },
    onReset() {
      //重置
      this.formInline = {};
    },
    selectedCellStyle({ column, columnIndex, row, rowIndex }) {
      if (rowIndex % 2 == 0) {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#061F41",
        };
      } else {
        return {
          color: "rgba(255, 255, 255, 0.5)",
          "background-color": "#0B2C54",
        };
      }
    },
    paginationFn(e) {
      console.log(e, "paginationFn");
      this.page.currentPage = e.page;
      this.page.pageSize = e.limit;
      if(this.formInline.pointID||this.formInline.energyGrade){
        this.getList("search");
      }else{
        this.getList();
      }
      if(e.limit==10){
        this.tableHeight = 496;
      }
    },
    getHeaderList() {
      axios.get("/vxeheaders/getHeaders").then((res) => {
        this.headerData = res.data;
        this.getList();
      });
    },
    getList(val) {
      let obj = {};
      if (val == "search") {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          deviceTypeName: this.formInline.deviceTypeName,//设备名称
          status: this.formInline.status,//状态
        };
      } else {
        obj = {
          pageNum: this.page.currentPage,
          pageSize: this.page.pageSize,
          // queryStartTime: this.formInline.time[0],
          // queryEndTime: this.formInline.time[1],
        };
      }
      let arr = [];
      this.headerData.forEach((item) => {
        if (item.name == this.headerZiduan) {
          this.tableData = [];
          // this.currentPage = 1;
          // this.pageSize = 10;
          // if (item.show != 0) {
            arr.push(item);
          // }
        }
      });
      this.headerTitle = arr;
      // axios.post("/real/gushing/abnormalPoint/list", obj).then((res) => {
        axios3.post("/shh-dw/real/gushing/abnormalPoint/list", obj).then((res) => {
        if (res.data) {
          this.tableData = res.data.list;
          this.page.total = Number(res.data.total);
        }
      });
    },
    getSelectList() {
      axios
        .post("/basic/combobox/list", {
          condition: ["AbnormalType"], 
        })
        .then((res) => {
          if (res.data) {
            this.statusList = res.data.AbnormalType.map((item) => {
              return {label: item.name, value: item.code}
          })
          }
        });
    },
  },
  computed: {
    ...mapGetters(["successFlag"]),
    tableHeaderShow() {
      let arr = [];
      this.headerTitle.forEach((item) => {
        if (item.show == 1) {
          arr.push(item);
        }
      });
      return arr;
    },
  },
  watch: {
    successFlag: {
      handler(newVal, oldVal) {
        if (newVal == true) {
          setTimeout(() => {
            this.getList();
            store.dispatch("LoginSuccess", false);
          }, 1000);
        }
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.getHeaderList();
    this.getSelectList();
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/styles/dateSelect.scss";
::v-deep .el-dialog__footer {
  background-color: #061f41;
}
::v-deep .el-switch__label--left {
  color: #dee1e6 !important;
}
::v-deep .el-switch__label--right {
  color: #dee1e6 !important;
}
::v-deep .is-active {
  color: #409eff !important;
  background-color: #133961 !important;
  border-radius: 4px;
}
.lishibaojing {
  .bottom {
    // height: 560px;
    height: 650px;
    overflow-y: auto;
  }
}
::v-deep .el-form-item__label {
  color: rgba(255, 255, 255, 0.5);
}
::v-deep .el-input--small .el-input__inner {
  background-color: #061f41;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #dee1e6 !important;
}

::v-deep .el-button--small {
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
::v-deep .el-table__header-wrapper {
  tr th {
    background-color: #0b2c54 !important;
    .cell {
      color: rgba(255, 255, 255, 0.5);
    }
  }
}
::v-deep .el-table__row > td {
  border: none;
}
::v-deep .el-table::before {
  height: 0px !important;
}
::v-deep .el-table__cell,
::v-deep .is-leaf {
  border: none !important;
}
::v-deep .el-table__empty-block {
  background-color: #061f41 !important;
}
::v-deep .el-table__empty-text {
  color: #dee1e6 !important;
}
::v-deep .is-leaf {
  border: none !important;
      .cell{
  color:#fff !important;
}
}
/*chrome滚动条颜色设置，纵向滚动条*/
*::-webkit-scrollbar {
  width: 5px;
  height: 10px;
  background-color: transparent;
} /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
*::-webkit-scrollbar-track {
  background-color: #f0f6ff;
} /*定义滚动条轨道 内阴影+圆角*/
*::-webkit-scrollbar-thumb {
  background-color: #1890ff;
  border-radius: 6px;
} /*定义滑块 内阴影+圆角*/
.scrollbarHide::-webkit-scrollbar {
  display: none;
}
.scrollbarShow::-webkit-scrollbar {
  display: block;
}
</style>
<style lang="scss">
// .el-table__body-wrapper::-webkit-scrollbar-thumb {
//   border-radius: 3px;
//   background: #1890ff; /* 修改滚动条颜色 */
// }
.el-select-dropdown__list {
  padding: 0 !important;
}
</style>

